<!--
 * @Author: Liz.Zheng
 * @Date: 2021-11-24 09:35:16
 * @LastEditTime: 2022-12-07 14:14:16
 * @LastEditors: 郑亚莉 zhengyali@shequ.life
 * @Description: 
 * @Motto: Write the code. Change the world.
-->
<template>
  <div style="padding: 10px">
    <a-row type="flex" style="margin-bottom: 30px">
      <a-col flex="auto">
        <a-input-search
          @search="onSearch"
          placeholder="搜索姓名、手机"
          style="width: 220px"
        >
        </a-input-search>
      </a-col>
      <a-col>
        <a-button type="primary" @click="btnLayer">
          <PlusOutlined />
          {{ $L("租客") }}联系人</a-button
        >
      </a-col>
    </a-row>
    <a-table
      bordered
      :dataSource="dataSource"
      :columns="columns"
      :pagination="pagination"
      @change="handleTableChange"
      rowKey="id"
      :scroll="{ x: 'max-content', y: $store.getters.isMobile ? 550 : true }"
    >
      <template #bodyCell="{ text, record, index, column }">
        <template v-if="column.key === 'action'">
          <a-button type="link" @click="edit(text)">编辑</a-button>
          <a-button type="link" @click="showModal(text)">删除</a-button>
        </template>
      </template>
    </a-table>
    <!-- 弹出层 -->
    <OwnerContactLayer
      :visible="visible"
      @btnCancel="btnCancel"
      @ok="handleOk"
      @getList="getBuildingLists"
      :id="BuildingId"
    />
  </div>
</template>

<script>
import { defineComponent, ref, computed, createVNode, watch } from "vue";
import { Modal, message } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import OwnerContactLayer from "./modules/OwnerContactLayer.vue";
import request from "../../../common/utils/request";
import store from "../../../store";
import BLCOMMON from "bl-common-vue3";

export default defineComponent({
  name: "ownerContactsList",
  components: {
    PlusOutlined,
    OwnerContactLayer,
  },
  setup() {
    // 选择按钮
    const selectedRowKeys = ref([]);
    const onSelectChange = (keys) => {
      selectedRowKeys.value = keys;
    };
    const tableTitle = computed(() => {
      return selectedRowKeys.value.length
        ? `已选择${selectedRowKeys.value.length}项`
        : "租客联系人";
    });
    const disabled = computed(() => {
      return selectedRowKeys.value.length > 1;
    });

    //  清除选择框
    const bntClear = () => {
      selectedRowKeys.value = [];
    };
    // 编辑按钮
    const BuildingId = ref();
    const edit = (id) => {
      visible.value = true;
      BuildingId.value = id;
    };
    const getBuildingLists = () => {
      getBuildingList();
      bntClear();
      visible.value = false;
    };
    // 删除按钮
    const Modals = ref(false);
    const showModal = (id) => {
      Modals.value = true;
      Modal.confirm({
        title: `确认删除该${BLCOMMON.utils.L("租客")}联系人么`,
        icon: createVNode(ExclamationCircleOutlined),
        okText: "确认",
        cancelText: "取消",
        onOk() {
          request
            .del("/org", "/owner/ownerContacts", {
              idArr: [id],
            })
            .then((res) => {
              page.value =
                dataSource.value.length == 1 ? page.value - 1 : page.value;
              getBuildingList();
              bntClear();
              message.success("删除成功");
            });
        },
      });
    };
    // 列表
    const dataSource = ref([]);
    const columns = ref([
      {
        title: "姓名",
        dataIndex: "name",
        key: "name",
        fixed: store.getters.isMobile ? undefined : "left",
        width: 150,
      },
      {
        title: "手机",
        dataIndex: "phone",
        key: "phone",
        width: 150,
      },
      {
        title: "邮箱",
        dataIndex: "email",
        key: "email",
        width: 150,
      },
      {
        title: "所属公司",
        dataIndex: "owner_name",
        key: "owner_name",
        width: 150,
      },
      {
        title: "通讯地址",
        dataIndex: "address",
        key: "address",
        width: 150,
      },
      {
        title: "是否默认联系人",
        dataIndex: "contact",
        filters: [
          {
            text: "是",
            value: "1",
          },
          {
            text: "否",
            value: "0",
          },
        ],
        filterMultiple: false,
        width: 150,
      },
      {
        title: "操作",
        dataIndex: "id",
        key: "action",
        fixed: "right",
        width: 150,
      },
    ]);

    // 分页
    const page = ref(1);
    const limit = ref(10);
    const total = ref(0);
    const pagination = computed(() => ({
      total: total.value,
      current: page.value,
      pageSize: limit.value,
      showSizeChanger: true,
    }));
    const filtersList = ref({});
    const handleTableChange = (pager, filters, sorter, current) => {
      page.value = pager.current;
      limit.value = pager.pageSize;
      filtersList.value = filters;
      getBuildingList();
    };
    // 联系人列表请求
    const getBuildingList = () => {
      request
        .get("/org", "/owner/ownerContacts", {
          page: page.value,
          pageSize: limit.value,
          is_default:
            filtersList.value.contact && filtersList.value.contact.length
              ? filtersList.value.contact.join(",")
              : undefined,
        })
        .then((res) => {
          dataSource.value = res.list.map((item) => {
            return {
              ...item,
              contact: item.is_default === 1 ? "是" : "否",
            };
          });
          total.value = res.total;
        });
    };
    getBuildingList();

    // 弹出层
    const visible = ref(false);
    const btnLayer = () => {
      visible.value = true;
      BuildingId.value = 0;
    };
    const btnCancel = () => {
      visible.value = false;
      // getBuildingList()
    };
    const handleOk = () => {
      visible.value = false;
      request
        .get("/org", "/owner/ownerContacts", {
          page: page.value,
          pageSize: limit.value,
          keywords: keyWordSearch.value,
        })
        .then((res) => {
          dataSource.value = res.list.map((item) => {
            return {
              ...item,
              contact: item.is_default === 1 ? "是" : "否",
            };
          });
          total.value = res.total;
        });
    };
    const keyWordSearch = ref("");
    const onSearch = (value) => {
      keyWordSearch.value = value;
      request
        .get("/org", "/owner/ownerContacts", { keywords: keyWordSearch.value })
        .then((res) => {
          dataSource.value = res.list.map((item) => {
            return {
              ...item,
              contact: item.is_default === 1 ? "是" : "否",
            };
          });
        });
    };
    return {
      dataSource,
      columns,
      selectedRowKeys,
      onSelectChange,
      pagination,
      visible,
      btnLayer,
      handleOk,
      btnCancel,
      tableTitle,
      bntClear,
      showModal,
      disabled,
      edit,
      getBuildingLists,
      BuildingId,
      onSearch,
      handleTableChange,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.ant-btn-link) {
  margin-right: 0;
}
</style>
